import React, { useState, useEffect } from 'react';
import { Pie, G2 } from '@ant-design/plots';
import { Skeleton } from 'antd';
import { axiosAjax } from '../../services/analysisAxios';
import { getYear } from './tools';

export default function MonthPage() {
  // 所有已下订单商品数据
  const [dataTotal, setDataTotal] = useState([]);
  // 加载态
  const [loaded, setLoaded] = useState(false);
  //  获取数据并修改加载态和商品数据状态值
  const allCommityTotal = async () => {
    // 获取今年起止时间
    let year = getYear();
    // 获取所有下单商品的信息
    let data = await axiosAjax('get', '/analysis/allorderByTime');
    // 存储每种商品类型的销售额
    let total = [];
    if (data.data.length > 0) {
      // 拿到不同类型并给销售额初始化
      total = data.data.map(item => {
        return {
          // 商品类型
          type: item.name,
          // 该类型的销售额
          value: 0
        }
      });
      // 遍历所有商品数据
      for (let i = 0; i < data.data.length; i++) {
        // 遍历类型&销售额
        for (let m = 0; m < total.length; m++) {
          // 某个商品类型与类型数组相匹配 并且该类型下商品数据>0
          if (data.data[i].name === total[m].type && data.data[i].arr.length > 0) {
            // 遍历某个商品类型下具体的商品
            for (let j = 0; j < data.data[i].arr.length; j++) {
              //对该商品订单时间进行转换 yy-mm-dd=>yymmdd
              let riqi = data.data[i].arr[j].time.split('-').join('');
              //订单时间在本年内 价格*购买数量并累加
              if (riqi >= year[0] && riqi <= year[1] && data.data[i].arr[j].commodity.price && data.data[i].arr[j].commodity.sale) {
                total[m].value += parseInt(data.data[i].arr[j].commodity.price) * parseInt(data.data[i].arr[j].commodity.sale);
              }
            }
          }
        }
      }
    }
    setDataTotal([
      {
        type: '可乐',
        value: 70,
      },
      {
        type: '雪碧',
        value: 30,
      },
      ...total,
      {
        type: '奶茶',
        value: 80,
      },
      {
        type: '啤酒',
        value: 90,
      }]);
    setLoaded(true);
  }

  useEffect(() => {
    allCommityTotal();
  }, []);

  if (!loaded) {
    return <div>
      <Skeleton
        active
        title={{ width: 0 }}
        paragraph={{
          // 骨架屏行数
          rows: 10,
          // 每行骨架屏宽度
          width: [570, 770, 770, 770, 770, 770, 770, 770, 670]
        }} />
    </div>
  }
  const G = G2.getEngine('canvas');
  const cfg = {
    appendPadding: 10,
    data: dataTotal,
    angleField: 'value',
    colorField: 'type',
    radius: 0.75,
    legend: false,
    label: {
      type: 'spider',
      labelHeight: 40,
      formatter: (data, mappingData) => {
        const group = new G.Group({});
        group.addShape({
          type: 'circle',
          attrs: {
            x: 0,
            y: 0,
            width: 40,
            height: 50,
            r: 5,
            fill: mappingData.color,
          },
        });
        group.addShape({
          type: 'text',
          attrs: {
            x: 10,
            y: 8,
            text: `${data.type}`,
            fill: mappingData.color,
          },
        });
        group.addShape({
          type: 'text',
          attrs: {
            x: 0,
            y: 25,
            text: `${data.value}元 ${(data.percent * 100).toFixed(2)}%`,
            fill: 'rgba(0, 0, 0, 0.65)',
            fontWeight: 700,
          },
        });
        return group;
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
  };
  const config = cfg;
  return (
    <div>
      <Pie {...config} />
    </div>
  )
}